<template>
  <!-- 角色表单弹窗 -->
  <el-dialog
      v-model="visibleDialog"
      :title="props.title"
      width="50%"
      draggable
      @close="closeDialog"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="采集器编号" prop="collecterCode">
            <el-input v-if="!props.isReadonly" v-model="formData.collecterCode" placeholder="请输入采集器编号"
                      clearable/>

            <span v-else>{{ formData.collecterCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采集器名称" prop="collecterName">
            <el-input v-if="!props.isReadonly" v-model="formData.collecterName" placeholder="请输入采集器名称"
                      clearable/>

            <span v-else>{{ formData.collecterName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="接口类型" prop="interfaceType">
            <el-select style="width: 100%" v-if="!props.isReadonly" v-model="formData.interfaceType"
                       placeholder="请选择接口类型" clearable>
              <el-option
                  v-for="item in dictionaryStore.filterDictList('Interface_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>

            <span v-else>{{ dictionaryStore.filterDictName('Interface_type', formData.interfaceType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采集行为" prop="isInsert">
            <el-checkbox v-if="!props.isReadonly" v-model="formData.isInsertStr">是否插入</el-checkbox>
            <el-checkbox v-if="!props.isReadonly" v-model="formData.isUpdateStr">是否更新</el-checkbox>

            <span v-if="props.isReadonly">{{ formData.isUpdateStr }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否批量" prop="isBatch">
            <el-radio v-if="!props.isReadonly" v-model="formData.isBatch" label="1">是</el-radio>
            <el-radio v-if="!props.isReadonly" v-model="formData.isBatch" label="0">否</el-radio>
            <span v-if="props.isReadonly">{{ dictionaryStore.filterDictName('Enabled', formData.isBatch) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否启用" prop="enabled">
            <el-radio v-if="!props.isReadonly" v-model="formData.enabled" label="1">是</el-radio>
            <el-radio v-if="!props.isReadonly" v-model="formData.enabled" label="0">否</el-radio>

            <span v-if="props.isReadonly">{{ dictionaryStore.filterDictName('Enabled', formData.enabled) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <!--      <el-form-item label="采集器脚本" prop="collecterScript">-->
      <!--        <el-input v-if="!props.isReadonly" v-model="formData.collecterScript" placeholder="请输入采集器脚本" clearable/>-->

      <!--        <span v-else>{{ formData.collecterScript }}</span>-->
      <!--      </el-form-item>-->

      <el-form-item label="api采集地址" prop="apiUrl" v-if="formData.interfaceType == 'WebAPI'">
        <el-input v-if="!props.isReadonly" v-model="formData.apiUrl" placeholder="请输入api采集地址" clearable/>

        <span v-else>{{ formData.apiUrl }}</span>
      </el-form-item>

      <el-form-item label="消息主题" prop="messageType">
        <el-input v-if="!props.isReadonly" v-model="formData.messageType" placeholder="请输入消息主题" clearable/>

        <span v-else>{{ formData.messageType }}</span>
      </el-form-item>

      <el-form-item label="说明" prop="remarks">
        <el-input type="textarea" v-if="!props.isReadonly" v-model="formData.remarks" placeholder="请输入说明"
                  clearable/>

        <span v-else>{{ formData.remarks }}</span>
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="!props.isReadonly" type="primary" :loading="loading" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import {useDictStoreHook} from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "DMPREALTIMECOLLECTERADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
    () => props.visible,
    (newVal: boolean) => {
      visibleDialog.value = newVal;
    }
);

const rules = reactive({
  collecterCode: [
    {required: true, message: "请输入采集器编号", trigger: "blur"},
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  collecterName: [
    {required: true, message: "请输入采集器名称", trigger: "blur"},
    {min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur"}
  ],
  interfaceType: [
    {required: true, message: "请选择接口类型", trigger: "blur"},
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  isInsert: [
    {required: true, message: "请选择采集行为", trigger: "blur"},
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  isUpdate: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  isBatch: [
    {required: true, message: "请选择是否批量", trigger: "blur"},
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  collecterScript: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  remarks: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  enabled: [
    {required: true, message: "请选择是否启用", trigger: "blur"},
  ],
  apiUrl: [
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
  messageType: [
    {required: true, message: "请输入消息主题", trigger: "blur"},
    {min: 1, max: 255, message: "长度在 1 到 255 个字符", trigger: "blur"}
  ],
});


const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  collecterCode: "",
  collecterName: "",
  interfaceType: "",
  isInsert: "",
  isUpdate: "",
  isInsertStr: "",
  isUpdateStr: "",
  isBatch: "",
  collecterScript: "",
  inputConfig: "",
  outputConfig: "",
  remarks: "",
  enabled: "",
  deleted: "",
  createdUserId: "",
  createTime: "",
  lastUpdatedUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserName: "",
  apiUrl: "",
  messageType: "",
});

watch(
    () => props.data,
    (newVal: any) => {
      formData.id = ""
      if (newVal?.id) {
        const {
          id,
          collecterCode,
          collecterName,
          interfaceType,
          isInsert,
          isInsertStr,
          isUpdateStr,
          isUpdate,
          isBatch,
          collecterScript,
          inputConfig,
          outputConfig,
          remarks,
          enabled,
          deleted,
          createdUserId,
          createTime,
          lastUpdatedUserId,
          createdUserName,
          lastUpdateTime,
          lastUpdatedUserName,
          apiUrl,
          messageType,
        } = newVal;
        Object.assign(formData, {
          id,
          collecterCode,
          collecterName,
          interfaceType,
          isInsert,
          isInsertStr,
          isUpdateStr,
          isUpdate,
          isBatch,
          collecterScript,
          inputConfig,
          outputConfig,
          remarks,
          enabled,
          deleted,
          createdUserId,
          createTime,
          lastUpdatedUserId,
          createdUserName,
          lastUpdateTime,
          lastUpdatedUserName,
          apiUrl,
          messageType,
        });
      }
    }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = ""
  formData.collecterCode = ""
  formData.collecterName = ""
  formData.interfaceType = ""
  formData.isInsert = ""
  formData.isInsertStr = ""
  formData.isUpdateStr = ""
  formData.isUpdate = ""
  formData.isBatch = ""
  formData.collecterScript = ""
  formData.inputConfig = ""
  formData.outputConfig = ""
  formData.remarks = ""
  formData.enabled = ""
  formData.deleted = ""
  formData.createdUserId = ""
  formData.createTime = ""
  formData.lastUpdatedUserId = ""
  formData.createdUserName = ""
  formData.lastUpdateTime = ""
  formData.lastUpdatedUserName = ""
  formData.apiUrl = ""
  formData.messageType = ""
}

const loading = ref(false);

/** 数据采集器保存提交 */
function handleSubmit() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;

      formData.isUpdate = formData.isUpdateStr ? 1 : 0;
      formData.isInsert = formData.isInsertStr ? 1 : 0;

      const text = formData.id ? "编辑" : "新增";
      await request({
        url: "/dmpAdmin/dmprealtimecollecter/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}


// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});


</script>
